<template>
    <div class="addBankCard">
        <!-- 订单信息 -->
        <van-nav-bar :title="title" left-arrow @click-left="onClickLeft" />
        <div class="content" v-if="cardType == 1">
            <van-cell-group inset style="margin-bottom: 18px;" v-for="item in cardList" :key="item.id">
                <van-cell title="收款人" :value="item.bankholder" />
                <van-cell title="银行账号" :value="item.banknumber" />
                <van-cell title="开户银行" :value="item.bankname" />
                <van-cell title="手机号" :value="item.mobile" />
                <van-cell value="删除">
                    <template #title>
                        <van-checkbox v-model="checked" label-disabled>当前提现默认选择</van-checkbox>
                    </template>
                </van-cell>
            </van-cell-group>
            <div>
                <van-button round block type="primary" native-type="submit" @click="addBand(2)">
                    添加银行卡
                </van-button>
            </div>
        </div>
        <div class="content" v-else>
            <van-form>
                <van-cell-group inset>
                    <van-field v-model="dataList.bankholder" name="收款人" label="收款人" placeholder="请输入"
                        :rules="[{ required: true, message: '请填写收款人' }]" />
                    <van-field v-model="dataList.banknumber" label="卡号" placeholder="请输入银行卡卡号" />
                    <van-field v-model="dataList.bankname" label="银行卡类别" placeholder="请输入" />
                    <van-field v-model="dataList.mobile" name="手机号" label="手机号" placeholder="请输入手机号"
                        :rules="[{ required: true, message: '请填写手机号' }]" />
                </van-cell-group>
                <div style="margin-top: 18px;">
                    <van-button round block type="primary" native-type="submit" @click="addBand(1)">
                        确认添加
                    </van-button>
                </div>
            </van-form>
        </div>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref,onMounted } from 'vue';
import { Toast } from 'vant';
import { addBankCard, getBankCard } from '../../../../api/index'

const checked = ref<any>(false);
const cardType = ref(history.state.type);
const name = ref("");
const bankCardNum = ref("");
const bankCardType = ref("");
const phone = ref("");
// 定义onClickLeft方法
const onClickLeft = () => history.back();
const title = ref('对公账号')
const dataList = reactive({
    mobile: '',  // 手机号码
    bankname: '',  //  银行名称
    bankholder: '',  //  持有人姓名
    banknumber: '',  //  银行卡号
    status: 0, //  状态
    type: 2
})
//  银行卡列表
const cardList = ref<any[]>([]);
//  添加银行卡
const addBand = (num: any) => {
    const resToast = ref('收款人，银行名称，银行卡号，手机号缺一不可！')
    if (num === 1) {
        if (dataList.mobile === '' || dataList.bankname === '' || dataList.bankholder === '' || dataList.banknumber === '') {
            Toast(resToast.value)
            return
        } else {
            cardType.value = 1
            title.value = '对公账号'
        }
    } else {
        cardType.value = 2
        title.value = '添加银行卡'
        return
    }
    let formData = new FormData();
    formData.append("mobile", dataList.mobile)
    formData.append("bankname", dataList.bankname)
    formData.append("bankholder", dataList.bankholder)
    formData.append("banknumber", dataList.banknumber)
    formData.append("status", dataList.status)
    formData.append("type", dataList.type)
    addBankCard(formData).then(res => {
        console.log(res);
        console.log(formData);
        if (res.code == 1) {
            cardList.value = res.data
            Toast(res.msg)
        } else {
            Toast(res.msg)
        }
    })
}

//加载银行卡列表
const getCardList = async () => {
    // cardType.value = 2
    let formData = new FormData();
    const res = await getBankCard(formData)
    if (res.code == 1) {
        cardList.value = res.data
        // Toast(res.msg)
        console.log("cardList:", res.data);
    } else {
        Toast(res.msg)
    }
};
onMounted(() => {
    getCardList();
});

</script>

<style lang="less" scoped>
@import url(../../../../style/common.css);

.addBankCard {
    background: #F6F7F9;
    width: 100%;
}

.van-nav-bar {
    width: 100%;
    height: 52px;
}

.content {
    height: calc(100vh - 82px);
    overflow: auto;
    padding: 15px;


    .van-cell {
        text-align: left;
    }
}


:deep(.van-nav-bar__left .van-badge__wrapper) {
    color: #272635;
}
</style>